import React, { useContext, useEffect, useState } from 'react';

import { Form, Input, Button, Grid, Select } from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import { IconRefresh, IconSearch } from '@arco-design/web-react/icon';
import cs from 'classnames';
import styles from './style/index.module.less';
import { EnumsRes } from '@/api/interface';
import { Emirates } from '@/api/modules';
import useIsMountedRef from '@/utils//useIsMountedRef';
import debounce from 'lodash/debounce';

const { Row, Col } = Grid;
const { useForm } = Form;
const Option = Select.Option;
function SearchForm(props: {
  onSearch: (values: Record<string, unknown>) => void;
}) {
  const { lang, rtl } = useContext(GlobalContext);

  const t = useLocale(locale);
  const [form] = useForm();

  const handleSubmit = () => {
    const values = form.getFieldsValue();
    if (values.q) {
      values.q = values.q.trim();
    }
    props.onSearch(values);
  };

  const handleReset = () => {
    form.resetFields();
    props.onSearch({});
  };

  const colSpan = 12;

  const activeOptions = [
    { value: 1, label: t['searchTable.operation.active'] },
    { value: 0, label: t['searchTable.operation.deactivate'] },
  ];
  const [emirate, setEmirate] = useState<Array<EnumsRes>>([]);
  const getEmirate = async () => {
    // Enums({ type: 'EmirateEnums' })
    //   .then((res) => {
    //     setEmirate(res.data);
    //   })
    //   .catch((e) => {
    //     console.log(e);
    //   });
    try {
      const { data } = await Emirates();
      if (isMountedRef.current) {
        setEmirate(data);
      }
    } catch (e) {
      console.error(e);
    }
  };
  const isMountedRef = useIsMountedRef();
  useEffect(() => {
    getEmirate();
    form.setFieldsValue({
      active: 1,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className={cs(styles['search-form-wrapper'], rtl ? 'rtl' : '')}>
      <Form
        form={form}
        className={rtl ? styles['search-formrtl'] : styles['search-form']}
        labelAlign="right"
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 19 }}
        onValuesChange={handleSubmit}
      >
        <Row gutter={24}>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.form.q']} field="q">
              <Input
                autoComplete="off"
                allowClear
                placeholder={t['searchTable.form.q.placeholder']}
              />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.columns.emirate']} field="emirate">
              <Select
                allowClear
                placeholder={t['searchTable.select.placeholder']}
              >
                {emirate.map((option, index) => (
                  <Option key={index} value={option.key}>
                    {option.value[lang === 'en-US' ? 'en' : 'ar']}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.columns.active']} field="active">
              <Select
                allowClear
                placeholder={t['searchTable.select.placeholder']}
              >
                {activeOptions.map((option, index) => (
                  <Option key={index} value={option.value}>
                    {option.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <div className={rtl ? styles['right-buttonrtl'] : styles['right-button']}>
        {/* <Button type="primary" icon={<IconSearch />} onClick={handleSubmit}>
          {t['searchTable.form.search']}
        </Button> */}
        <Button
          icon={<IconRefresh />}
          onClick={handleReset}
          className={styles['button']}
        >
          {t['searchTable.form.reset']}
        </Button>
      </div>
    </div>
  );
}

export default SearchForm;
